Update table pages to scroll full page by KJ21-ENG · Pull Request #93877 · Expensify/App

KJ21-ENG · 2026-06-17T20:16:55Z

Explanation of Change

Adds headerComponent support to the shared Table so page-level controls (header content, buttons, search/filter bar) render inside the table's FlashList and scroll away with the rows, while the table column header is rendered as a sticky list item. Row render indexes and scrollToIndex callers remain aligned to the real table data, and sticky-header activation waits until the list has data to avoid the StickyHeaders load-time error.

All migrated table pages now use the table-owned header flow: Workspaces, Domains (list, admins, groups, members), Categories, Tags, Taxes, Members, Company Cards, Distance Rates, Per Diem, Rooms, Rules (personal rules and all workspace rules tabs), Agents, Expensify Cards, and report participants.

The table empty states (Table.EmptyState / Table.NoResultsState) render inside the scrolling list below the page header, so the page controls stay visible and usable when the table is empty or a search/filter matches nothing.

This PR also $ #95556: on native, focusing the table search bar now scrolls it above the keyboard (using the existing useScrollToFocusedInput pattern), so the input stays visible while typing in landscape.

Fixed Issues

$ #92930
PROPOSAL: #92930 (comment)
$ #95556

Tests

Sign in with an account that has at least one workspace with enough rows to scroll (categories, tags, members, etc.).
Open the Workspaces list. Verify the Workspaces/Domains tab row, the New workspace button, and the search bar scroll away with the rows, while the table column header sticks to the top of the list.
Open Domains, Categories, Tags, Taxes, Members, Company Cards, the workspace Expensify Card list, Distance Rates, Per Diem, Rooms, the workspace Rules tabs, Settings > Rules, Settings > Agents, and a group chat's Members page with enough rows to scroll. Verify each page's controls scroll away with the rows while the column header sticks.
On any table page, search for text that matches nothing. Verify the "no results" view appears below the still-visible search bar, and clearing the search restores the rows.
Open a table page with no data (e.g. Categories on a new workspace). Verify the empty state renders below the page controls instead of replacing them.
Verify search, filters, sorting, and row actions still target the correct rows. Duplicate a workspace and verify the list scrolls to the new workspace. Open a room, navigate back to the Rooms page, and verify the room row is highlighted.
On Android native, rotate to landscape, open Workspaces, and tap the search bar. Verify the list scrolls the search input above the keyboard and it stays fully visible while typing.
Refresh or directly deeplink to a workspace table page. Verify the app does not show the error boundary during the initial table load.
Open Company Cards with no feed, a pending feed, and with cards. Verify the empty/pending states keep the fixed header buttons, and with cards shown the buttons scroll with the list.

Verify that no errors appear in the JS console

Offline tests

Disconnect the network and repeat the table scrolling checks on a few pages.
Verify the controls still scroll with the rows, the sticky column header remains usable, and the offline indicator does not overlap the table.

QA Steps

Same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

611393262-bb275b7b-db8e-4386-b9f5-19de01001916.mp4

Android: mWeb Chrome

611381825-6fceb35a-5f11-4439-97cd-76fac7124bd9.mp4

iOS: Native

Screen.Recording.2026-06-23.at.12.49.39.AM.mov

iOS: mWeb Safari

VIDEO-2026-06-23-00-03-34.mp4

MacOS: Chrome / Safari

ezyZip.53.mp4

melvin-bot · 2026-06-18T22:10:40Z

@Krishna2323 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

codecov · 2026-06-18T22:14:05Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/components/Table/Table.tsx	`96.72% <100.00%> (+1.16%)`	⬆️
...ponents/Table/TableEmptyStates/TableEmptyState.tsx	`90.90% <100.00%> (-9.10%)`	⬇️
...components/Table/TableFilterBar/TableSearchBar.tsx	`100.00% <100.00%> (ø)`
src/components/Table/TableHeader.tsx	`97.14% <100.00%> (+0.08%)`	⬆️
src/components/Table/buildTableListData.ts	`100.00% <100.00%> (ø)`
src/components/Table/index.tsx	`100.00% <ø> (ø)`
...mponents/Tables/WorkspaceCategoriesTable/index.tsx	`72.09% <100.00%> (ø)`
...onents/Tables/WorkspaceCompanyCardsTable/index.tsx	`64.39% <100.00%> (+1.11%)`	⬆️
src/components/Tables/WorkspaceListTable/index.tsx	`79.54% <100.00%> (ø)`
.../components/Tables/WorkspaceMembersTable/index.tsx	`31.63% <100.00%> (-0.70%)`	⬇️
... and 41 more
... and 99 files with indirect coverage changes

github-actions · 2026-06-19T13:29:50Z

🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-06-19T13:43:32Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #93877.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-39a3c368afc-912d4a2-8ffde02fcd4480130fd0009186348ae059bad18a/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-39a3c36-912d4a2-c4b04c2bc68fed4d26ac027093c8df649f3207e4/index.html

Web 🕸️
https://93877.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

JS00001 · 2026-06-19T13:57:44Z

The content scrolls behind the header, so we can see it

shawnborton · 2026-06-19T14:29:14Z

Can we keep the border radius of the table header when we scroll? It looks like it turns into a squared edge:

shawnborton · 2026-06-19T14:29:41Z

Otherwise feeling pretty good to me, very excited for this one!

trjExpensify

Looks nice, good from product. 👍

KJ21-ENG · 2026-07-11T11:51:45Z

@Krishna2323 One scope question: WorkspaceExpensifyCardsTable and ReportParticipantsTable also use the shared table component but still have the fixed (non-scrolling) header composition — they weren't in the original issue's page list, so this PR doesn't touch them. Want me to include them here as well ?

shawnborton · 2026-07-12T19:28:47Z

I would say yes, as we want all tables to behave the same.

…r tables

…ing-flow # Conflicts: # src/components/Table/TableBody.tsx # src/pages/DynamicReportParticipantsPage.tsx

…ing-flow # Conflicts: # src/components/Tables/AgentsTable/index.tsx # src/components/Tables/WorkspaceRoomsTable/index.tsx

KJ21-ENG · 2026-07-13T23:16:53Z

@Krishna2323 @shawnborton Following up on the scope question — done ✅

Converted the last two tables per the design call: WorkspaceExpensifyCardsTable (+ WorkspaceExpensifyCardListPage) and ReportParticipantsTable (+ DynamicReportParticipantsPage). Every table under components/Tables now scrolls the full page with a sticky column header. For the Expensify Card page, the header buttons/feed selector stay fixed above the empty-card view (unchanged) and scroll with the rows when the table shows; for report participants, the invite/bulk-actions button now scrolls with the member list.
Merged latest main twice more along the way and reconciled with the new Table.LoadingState work (the Agents/Rooms loading skeletons are kept, with the page header rendered above them so the layout doesn't jump), the ButtonWithDropdownMenu prop migration, and the updated TableBody empty contract. Also updated the new company-cards table test mock to expose composeTableHeaderComponent.
Heads-up: main is currently failing ExportOnyxStateTest because the new areAgentsLoaded/arePolicyRoomsLoaded keys (from the LoadingState PR) aren't in the export buckets. I added them to the safe export keys here following the RAM_ONLY_COMPANY_CARDS_LOADING_STATE precedent so this PR's CI is green — happy to drop that commit if a separate fix lands on main first.

All checks are green and the branch has no conflicts. Ready for review 🙌

shawnborton · 2026-07-14T13:12:47Z

Awesome, let's get this into final review @Krishna2323

Krishna2323 · 2026-07-15T03:12:46Z

App crashes on members page - Error: LayoutManager is not initialized, layout info is unavailable

Monosnap.screencast.2026-07-15.08-41-30.mp4

KJ21-ENG · 2026-07-15T12:43:47Z

@Krishna2323 This happened because the merge-conflict resolution removed the FlashList initialization guard, allowing sticky headers to access LayoutManager before the first layout.
We restored the guard so sticky headers activate only after FlashList onLoad plus one animation frame, and added regression coverage.

JS00001 · 2026-07-15T12:54:18Z

conflicts

KJ21-ENG · 2026-07-15T12:58:34Z

working on it

KJ21-ENG · 2026-07-15T16:04:06Z

Now working on solving new conflicts :)

KJ21-ENG · 2026-07-15T16:24:08Z

Done!

Krishna2323 · 2026-07-16T15:42:05Z

@codex review

Krishna2323 · 2026-07-16T15:43:42Z

                </HeaderWithBackButton>
                {shouldDisplayButtonsInSeparateLine && !!getHeaderButtons() && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}

                {(!hasVisibleCategories || isLoading) && headerContent}


While loading, headerContent renders outside the table; once data exists it becomes headerComponent (line 702). They aren’t double-mounted at once, but the subtitle relocates when load finishes.

Can we always pass it through the table (headerComponent={headerContent}) so it doesn’t jump? Same pattern on Tags/Taxes.

This transition is intentional for now. The table is not mounted while loading, and always passing headerComponent would duplicate the header in the loaded-empty state unless we also rework that fallback. I’d prefer to keep the existing loading/empty composition in this PR.

Krishna2323 · 2026-07-16T15:44:07Z

                        {!shouldDisplayButtonsInSeparateLine && getHeaderButtons()}
                    </HeaderWithBackButton>
                    {shouldDisplayButtonsInSeparateLine && !!getHeaderButtons() && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
                    {(!hasVisibleTags || isLoading) && headerContent}


Same as Categories: subtitle outside while loading/empty (here), then headerComponent inside once tags are visible (line 888). Prefer one table-owned path so it doesn’t relocate.

Same here — this is intentional for the current loading/empty fallback. Passing the subtitle into the table alone would duplicate it when loaded with no tags, so I’d keep the existing composition in this PR.

Krishna2323 · 2026-07-16T15:44:31Z

                    {!shouldDisplayButtonsInSeparateLine && headerButtons}
                </HeaderWithBackButton>
                {shouldDisplayButtonsInSeparateLine && !!headerButtons && <View style={[styles.pl5, styles.pr5]}>{headerButtons}</View>}
                {(!hasVisibleTaxes || isLoading) && headerContent}


Same load transition as Categories/Tags — subtitle outside on load/empty, then moved into headerComponent when taxes are visible (line 420). Please use a single path through the table.

Same for Taxes — this is intentional for the current loading/empty fallback. Passing the subtitle into the table alone would duplicate it when loaded with no taxes, so I’d keep the existing composition in this PR.

chatgpt-codex-connector · 2026-07-16T15:49:54Z

Codex Review: Didn't find any major issues. Swish!

Reviewed commit: 1c0d498e4f

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

…ing-flow # Conflicts: # src/components/Table/Table.tsx

melvin-bot Bot assigned KJ21-ENG Jun 17, 2026

Fix table page header scrolling

e3d26d7

KJ21-ENG force-pushed the KJ21-ENG/92930-raising-flow branch from 265dd82 to e3d26d7 Compare June 17, 2026 20:20

KJ21-ENG added 2 commits June 19, 2026 02:38

Fix table sticky header initial load

6c116b3

Harden table sticky header timing

881019c

KJ21-ENG marked this pull request as ready for review June 18, 2026 22:10

KJ21-ENG requested review from a team as code owners June 18, 2026 22:10

melvin-bot Bot requested a review from Krishna2323 June 18, 2026 22:10

melvin-bot Bot requested review from trjExpensify and removed request for a team June 18, 2026 22:10

github-actions Bot reviewed Jun 18, 2026

View reviewed changes

Comment thread src/components/Table/TableBody.tsx Outdated

github-actions Bot reviewed Jun 18, 2026

View reviewed changes

Comment thread src/components/WorkspaceListLayout.tsx Outdated

github-actions Bot reviewed Jun 18, 2026

View reviewed changes

Comment thread src/components/Table/types.ts

Address table review style findings

39a3c36

JS00001 mentioned this pull request Jun 19, 2026

Update the policy expensify card table to the new style #93861

Merged

2 tasks

JS00001 self-requested a review June 19, 2026 13:02

KJ21-ENG mentioned this pull request Jun 19, 2026

[$250] Update pages using the common table component to scroll the entire page #92930

Open

JS00001 requested changes Jun 19, 2026

View reviewed changes

Comment thread src/components/Table/TableBody.tsx Outdated

Comment thread src/components/Table/TableBody.tsx Outdated

Comment thread src/components/WorkspaceListLayout.tsx Outdated

Simplify workspace header rendering

fc98458

trjExpensify previously approved these changes Jun 19, 2026

View reviewed changes

Fix sticky table header background

991a2f6

KJ21-ENG added 5 commits July 14, 2026 02:59

Scroll Expensify Card and report participants page controls with thei…

17b98a6

…r tables

Merge remote-tracking branch 'upstream/main' into KJ21-ENG/92930-rais…

8ca41b5

…ing-flow # Conflicts: # src/components/Table/TableBody.tsx # src/pages/DynamicReportParticipantsPage.tsx

Expose composeTableHeaderComponent in company cards table test mock

3db8b82

Merge remote-tracking branch 'upstream/main' into KJ21-ENG/92930-rais…

d8b3800

…ing-flow # Conflicts: # src/components/Tables/AgentsTable/index.tsx # src/components/Tables/WorkspaceRoomsTable/index.tsx

Add agents and policy rooms loaded flags to safe Onyx export keys

4718441

Fix sticky table header initialization

5f27b5f

Merge upstream/main into KJ21-ENG/92930-raising-flow

3adf17a

KJ21-ENG added 5 commits July 15, 2026 18:37

Fix table page compiler compatibility

7e47821

Remove orphaned members search ref

9f910d5

Fix TableBody compiler divergence

92de38f

Fix TableBody compiler divergence

6102778

Merge validated compiler fix history

922478c

Merge upstream/main into KJ21-ENG/92930-raising-flow

1c0d498

Krishna2323 reviewed Jul 16, 2026

View reviewed changes

KJ21-ENG added 3 commits July 16, 2026 22:45

Fix sticky table header lifecycle

a99a865

Merge remote-tracking branch 'upstream/main' into KJ21-ENG/92930-rais…

ace477e

…ing-flow # Conflicts: # src/components/Table/Table.tsx

Fix sticky table validation issues

059f5d8

KJ21-ENG requested a review from Krishna2323 July 16, 2026 22:20

Uh oh!

Conversation

KJ21-ENG commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Jun 18, 2026

Uh oh!

codecov Bot commented Jun 18, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JS00001 commented Jun 19, 2026

Uh oh!

shawnborton commented Jun 19, 2026

Uh oh!

shawnborton commented Jun 19, 2026

Uh oh!

trjExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

KJ21-ENG commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shawnborton commented Jul 12, 2026

Uh oh!

KJ21-ENG commented Jul 13, 2026

Uh oh!

shawnborton commented Jul 14, 2026

Uh oh!

Krishna2323 commented Jul 15, 2026

Uh oh!

KJ21-ENG commented Jul 15, 2026

Uh oh!

JS00001 commented Jul 15, 2026

Uh oh!

KJ21-ENG commented Jul 15, 2026

Uh oh!

KJ21-ENG commented Jul 15, 2026

Uh oh!

KJ21-ENG commented Jul 15, 2026

Uh oh!

Krishna2323 commented Jul 16, 2026

Uh oh!

Uh oh!

Krishna2323 Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

KJ21-ENG Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

Krishna2323 Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

KJ21-ENG Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

Krishna2323 Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

KJ21-ENG Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KJ21-ENG commented Jun 17, 2026 •

edited

Loading

codecov Bot commented Jun 18, 2026 •

edited by github-actions Bot

Loading

KJ21-ENG commented Jul 11, 2026 •

edited

Loading